<template>
<div>
  <audio src="@/assets/ff.wav" controls="controls"></audio>
  <el-divider></el-divider>
  <!-- 此处的ref属性，可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素 -->
  <div style="display: flex;justify-content: center">
    <div>
      <audio
        ref="audio"
        @pause="onPause"
        @play="onPlay"
        @timeupdate="onTimeUpdate"
        @loadedmetadata="onLoadedMetaData"
        controls="controls"
        src="@/assets/ff.wav"></audio>
      <!-- 音频播放控件 -->
      <div>
        <el-button
          type="text"
          @click="startPlayOrPause"
        >{{audio.playing | transPlayPause}}</el-button>
        <el-tag type="info">{{audio.currentTime | formatSecond}}</el-tag>
        <el-tag type="info">{{audio.maxTime | formatSecond}}</el-tag>
      </div>
    </div>
    <div>
      <el-slider
        vertical
        height="100px"
        v-model="sliderTime"
        :format-tooltip="formatProcessToolTip"
        @change="changeCurrentTime"
        class="slider"
      ></el-slider>
    </div>
  </div>

</div>
</template>

<script>
// 整数格式化成时:分:秒
function realFormatSecond(second) {
  var secondType = typeof second;
  if (secondType === 'number' || secondType === 'string') {
    second = parseInt(second);
    var hours = Math.floor(second / 3600);
    second = second - hours * 3600;
    var minute = Math.floor(second / 60);
    second = second - minute * 60;
    return hours + ":"+('0'+minute).slice(-2) + ":" +('0' + second).slice(-2)
  }else {
    return '0:00:00';
  }
}

/**
 * 两个重要事件：
 * loadedmetadata: 代表音频的元数据已经被加载完成，可以从中获取音频总时长
 * timeupdate: 当前播放位置作为正常播放的一部分而改变，或者以特别有趣的方式，
 * 例如不连续地改变，可以从该事件中获取音频的当前播放时间，
 * 该事件在播放过程中会不断被触发

 */

export default {
  name: "VueAudio",
  data(){
    return {
      audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: false,
        // 音频当前播放时长
        currentTime: 0,
        // 音频最大播放时长
        maxTime: 0,
      },
      sliderTime: 0
    }
  },
  methods: {
    // 控制音频的播放与暂停
    startPlayOrPause(){
      return this.audio.playing ? this.pause() : this.play()
    },
    // 播放音频
    play(){
      this.$refs.audio.play();
    },
    // 暂停音频
    pause(){
      this.$refs.audio.pause();
    },
    // 当音频播放
    onPlay(){
      this.audio.playing = true;
    },
    // 当音频暂停
    onPause(){
      this.audio.playing = false;
    },
    // 当timeUpdate事件大概每秒一次，用来更新音频流的当前播放时间
    onTimeUpdate(res) {
      console.log('timeUpdate');
      console.log(res);
      this.audio.currentTime = res.target.currentTime;
      // 当音频当前时间改变后，进度条也要改变
      this.sliderTime = this.audio.currentTime / this.audio.maxTime * 100
    },
    // 当加载语音流元数据完成后，会触发该事件的回调函数
    // 语音元数据主要是语音的长度之类的数据
    onLoadedMetaData(res) {
      console.log('onLoadedMetaData');
      console.log(res);
      this.audio.maxTime = parseInt(res.target.duration);
    },
    // 拖动进度条，改变当前时间，index是进度条改变时的回调函数的参数0-100之间，需要换算成实际时间
    changeCurrentTime(index) {
      this.$refs.audio.currentTime = index / 100 * this.audio.maxTime
    },
    // 进度条格式化toolTip
    formatProcessToolTip(index=0) {
      index = this.audio.maxTime / 100 * index;
      return '进度条：' + realFormatSecond(index);
    }
  },
  filters: {
    // 使用组件过滤器来动态改变按钮的显示
    transPlayPause(value){
      return value ? '暂停':'播放'
    },
    // 将整数转化成时分秒
    formatSecond(second=0) {
      return realFormatSecond(second);
    }
  }
}
</script>

<style scoped>

</style>